<!-- 详情信息 -->
<template>
  <div class="details-container">
    <div v-if="Object.keys(StudentListSelect).length">
      <div class="Ifon">
        <div class="left">
          <BackgroundBox>
            <div class="title">用户信息</div>
            <div class="content">
              <p>
                姓名:<span>{{ StudentListSelect.studentName }}</span>
              </p>
              <p>
                学号:<span>{{ StudentListSelect.studentID }}</span>
              </p>
              <p>
                手机号:<span>{{ StudentListSelect.phone }}</span>
              </p>
              <p>
                入住日期:<span>{{
                  moment(StudentListSelect.checkInTime).format("YYYY-MM-DD")
                }}</span>
              </p>
            </div>
          </BackgroundBox>
        </div>
        <div class="rigth">
          <BackgroundBox>
            <DisplayBox
              :content="DisplayBoxDataRef"
              :BoxBorder="'1px solid #909399'"
            ></DisplayBox>
          </BackgroundBox>
        </div>
      </div>
      <div class="record">
        <BackgroundBox>
          <div class="item">
            <p>早起概率:</p>
            <div class="schedule">
              <span
                class="primary"
                :style="{
                  width: `${props.StudentListSelect.getUpProbability}`,
                }"
              ></span>
              <span class="probability">{{
                props.StudentListSelect.getUpProbability
              }}</span>
            </div>
          </div>
          <div class="item">
            <p>早归概率:</p>
            <div class="schedule">
              <span
                class="success"
                :style="{
                  width: `${props.StudentListSelect.returnProbability}`,
                }"
              ></span>
              <span class="probability">{{
                props.StudentListSelect.returnProbability
              }}</span>
            </div>
          </div>
          <div class="item">
            <p>打扫概率:</p>
            <div class="schedule">
              <span
                class="good"
                :style="{
                  width: `${props.StudentListSelect.cleanProbability}`,
                }"
              ></span>
              <span class="probability">{{
                props.StudentListSelect.cleanProbability
              }}</span>
            </div>
          </div>
        </BackgroundBox>
      </div>
    </div>
    <div v-else>
        <BackgroundBox>
            <Unavailable></Unavailable>
        </BackgroundBox>
    </div>
  </div>
</template>

<script setup>
import BackgroundBox from "@/components/BackgroundBox/index.vue";
import Unavailable from "@/components/Unavailable/index.vue";
import DisplayBox from "@/components/DisplayBox/index.vue";
import moment from "moment";
import { computed, ref } from "vue";
const props = defineProps({
  StudentListSelect: {
    type: Object,
    default: () => ({}),
  },
});
const DisplayBoxDataRef = ref([
  {
    IconColor: "#40c9c6",
    Icon: "roomIcon",
    title: "房间号",
    text: computed(() => props.StudentListSelect.roomNo),
  },
  {
    IconColor: "#36a3f7",
    Icon: "floor",
    title: "所在楼层",
    text: computed(() => props.StudentListSelect.floorNumber),
  },
  {
    IconColor: "#f4526d",
    Icon: "dormitory",
    title: "宿舍楼",
    text: computed(() => props.StudentListSelect.dormitoryName),
  },
  {
    IconColor: "#34bfa3",
    Icon: "Beds",
    title: "床位",
    text: computed(() => props.StudentListSelect.bednumber),
  },
]);
</script>

<style lang="less" scoped>
@import "@/styles/var.less";
.details-container {
  width: 100%;
  height: 100%;
  margin-bottom:20px ;
  .back-container {
    padding: 20px;
    min-height: 150px;
  }
  .Ifon {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    .left {
      .title {
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid @second;
        font-size: 1.2em;
        font-weight: bold;
        color: @primary;
      }
      .content {
        padding-top: 20px;
        p {
          margin: 20px 0;
          font-weight: 600;
          color: @gray;
          span {
            margin-left: 3px;
            font-weight: normal;
          }
        }
      }
    }
  }
  .record {
    margin: 20px 0;
    .item {
      .schedule {
        margin: 10px 0;
        height: 20px;
        border-radius: 20px;
        width: 100%;
        background-color: #e6ebf5;
        overflow: hidden;
        position: relative;
        span {
          display: block;
          height: 100%;
        }
        .probability {
          position: absolute;
          top: 50%;
          left: 10px;
          transform: translateY(-50%);
          display: flex;
          align-items: center;
          font-size: 0.9em;
          color: @white;
        }
      }
    }
    .primary {
      background-color: @primary;
    }
    .success {
      background-color: @success;
    }
    .good {
      background-color: @good;
    }
  }
}
</style>